<template>
	<view class="msg">
		<block v-if="shop.type === 5">
			<block v-if="source.status === 0 && source.paystatus === 0">
				<block v-if="!type || type === 2">
					<view class="clude_img">
						<view class="state">
							<image src="/static/wait.png" class="image" v-if="type === 2"></image>
							<text :class="{ min: !type }">待付款</text>
						</view>
						<view class="times" v-if="type === 2 && !overtime">
							<view class="lot">剩余：{{ hour }}小时{{ min }}分钟</view>
							<view class="real">
								需付款：
								<text class="text-price text-bold text-df">{{ o_mx }}</text>
							</view>
						</view>
					</view>
				</block>
				<block v-else-if="type === 1"><view class="min">需</view></block>
			</block>
			<block v-if="source.status === 0 && source.paystatus === 1 && source.sendstatus === 0">
				<block v-if="!type || type === 2">
					<view class="clude_img">
						<view class="state">
							<image src="/static/wait_send.png" class="image" v-if="type === 2"></image>
							<text :class="{ min: !type }">待发货</text>
						</view>
					</view>
				</block>
				<block v-else-if="type === 1"><view class="min">实</view></block>
			</block>
			<block v-if="source.status === 0 && source.paystatus === 1 && source.sendstatus === 1">
				<block v-if="!type || type === 2">
					<view class="clude_img">
						<view class="state">
							<image src="/static/delivery.png" class="image" v-if="type === 2"></image>
							<text :class="{ min: !type }">配送中</text>
						</view>
					</view>
				</block>
				<block v-else-if="type === 1"><view class="min">实</view></block>				
			</block>
			<block v-if="(source.status === 0 && source.sendstatus === 2 && source.is_discuss === 0) || (source.status === 1 && source.sendstatus === 2 && source.is_discuss === 0)">
				<block v-if="!type || type === 2">
					<view class="clude_img">
						<view class="state">
							<image src="/static/evaluate.png" class="image" v-if="type === 2"></image>
							<text :class="{ min: !type }">待评价</text>
						</view>
					</view>
				</block>
				<block v-else-if="type === 1"><view class="min">实</view></block>
			</block>
			<block v-if="source.return_status === 0 && source.sendstatus > 2">
				<block v-if="!type || type === 2">
					<view class="clude_img">
						<view class="state">
							<image src="/static/sale.png" class="image" v-if="type === 2"></image>
							<text :class="{ min: !type }">
								<block v-if="source.sendstatus === 3">申请退货</block>
								<block v-else-if="source.sendstatus === 5">申请退款</block>
							</text>
						</view>
					</view>
				</block>
				<block v-else-if="type === 1"><view class="min">实</view></block>		
			</block>
			<block v-if="source.return_status === -1 && source.sendstatus > 2">
			<view class="min">退货失败</view>
			</block>
			<block v-if="source.return_status === 1 && source.sendstatus > 2">
			<view class="min">退货成功</view>
			</block>
			<block v-if="source.return_status === 2 && source.sendstatus > 2">
				<block v-if="!type || type === 2">
					<view class="clude_img">
						<view class="state">
							<image src="/static/re.png" class="image" v-if="type === 2"></image>
							<text :class="{ min: !type }">同意退货</text>
						</view>
					</view>
				</block>
				<block v-else-if="type === 1"><view class="min">实</view></block>			
			</block>
			<block v-if="source.return_status === 3 && source.sendstatus === 1 && source.status === 1 && source.paystatus === 1">
				<block v-if="!type || type === 2">
					<view class="clude_img">
						<view class="state">
							<image src="/static/re.png" class="image" v-if="type === 2"></image>
							<text :class="{ min: !type }">拒绝退货</text>
						</view>
					</view>
				</block>
				<block v-else-if="type === 1"><view class="min">实</view></block>				
			</block>
			<block v-if="source.return_status === 3 && source.sendstatus > 2">驳回请求</block>
			<block v-if="(source.return_status === 4 || source.return_status === 5) && source.sendstatus > 2">
				用户退货中
			</block>
			<block v-if="source.return_status === 6 && source.sendstatus > 2">商家已收货</block>
			<block v-if="source.return_status === 8 && source.sendstatus === 5">
				<block v-if="!type || type === 2">
					<view class="clude_img">
						<view class="state">
							<image src="/static/refund.png" class="image" v-if="type === 2"></image>
							<text :class="{ min: !type }">同意退款</text>
						</view>
					</view>
				</block>
				<block v-else-if="type === 1"><view class="min">实</view></block>
			</block>
			<block v-if="source.return_status === 8 && source.sendstatus === 6">
				<block v-if="!type || type === 2">
					<view class="clude_img">
						<view class="state">
							<image src="/static/refund.png" class="image" v-if="type === 2"></image>
							<text :class="{ min: !type }">已退款</text>
						</view>
					</view>
				</block>
				<block v-else-if="type === 1"><view class="min">实</view></block>			
			</block>
			<block v-if="source.return_status === 9 && source.sendstatus > 2">驳回退款</block>
			<block v-if="source.status === -1">
				<block v-if="!type || type === 2">
					<view :class="['clude_img', { err: type === 2 }]">
						<view class="state">
							<image src="/static/cancel.png" class="image" v-if="type === 2"></image>
							<text :class="{ min: !type }">已取消</text>
						</view>
						<view class="err" v-if="type === 2">取消原因：用户确认取消</view>
					</view>
				</block>
				<block v-if="type === 1"><view class="min">应</view></block>			
			</block>
			<block v-if="(source.status === 0 && source.sendstatus === 2 && source.is_discuss === 1) || (source.status === 1 && source.sendstatus === 2 && source.is_discuss === 1)">
				<block v-if="type === 1">
					<view class="min">实</view>
				</block>
				<block v-if="!type"></block>
				<block v-if="type === 2">
					<view class="clude_img">
						<view class="state">
							<image src="/static/wait.png" class="image" v-if="type === 2"></image>
							<text :class="{ min: !type }">已完成</text>
						</view>
					</view>
				</block>
			</block>
			<block v-if="source.status === -2">
				<block v-if="!type || type === 2">
					<view :class="['clude_img', { err: type === 2 }]">
						<view class="state">
							<image src="/static/cancel.png" class="image" v-if="type === 2"></image>
							<text :class="{ min: !type }">已取消</text>
						</view>
						<view class="err" v-if="type === 2">取消原因：超时未支付</view>
					</view>
				</block>
				<block v-if="type === 1"><view class="min">应</view></block>
			</block>			
		</block>
		<block v-if="shop.type === 1">
			<text v-if="source.status === 0 && source.pay_status === 0">
				<block v-if="type === 1">需</block>
				<block v-else>待付款</block>
			</text>
			<text v-if="source.status === 1 || source.status === 9 || source.status === 11 || source.status === 13">
				<block v-if="type === 1">实</block>
				<block v-else>待发货</block>
			</text>
			<text v-if="source.status === 10">
				<block v-if="type === 1">实</block>
				<block v-else>待收获</block>				
			</text>
			<text v-if="source.status === 4 || source.status === 3">
				<block v-if="type === 1">实</block>
				<block v-else>待评价</block>				
			</text>	
			<text v-if="source.status === -1">
				<block v-if="type === 1">应</block>
				<block v-else>已取消</block>				
			</text>						
		</block>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
export default {
	props: {
		source: Object,
		o_mx: String,
		type: {
			type: Number,
			default: 0
		}
	},
	computed: {
		...mapGetters([
			'shop'
		])
	},
	data() {
		return {
			hour: 0,
			min: 0,
			sec: 0,
			overtime: false
		};
	},
	created() {
		this.getTimes();
	},
	destroyed() {
		if (this.type === 2) clearTimeout(this.timeout);
	},
	methods: {
		getTimes() {
			const v = {
				zero: m => {
					let n = parseInt(m, 10);
					if (n > 0) {
						if (n <= 9) {
							n = `0${n}`;
						}
						return String(n);
					} else {
						return '00';
					}
				},
				dev: () => {
					if (this.type === 2 && !this.source.status && !this.source.paystatus) {
						const create_Time = this.source.createtime.replace(/-/gi, '/');
						const end_time = new Date(create_Time).getTime() + 24 * 60 * 60 * 1000;
						const start_time = new Date().getTime();
						const times = parseInt((end_time - start_time) / 1000);
						if (times > 0) {
							this.hour =
								Math.floor(times / 3600) > 0
									? v.zero(Math.floor(times / 3600))
									: '00';
							this.min =
								Math.floor((times % 3600) / 60) > 0
									? v.zero(Math.floor((times % 3600) / 60))
									: '00';
							this.sec =
								Math.floor(times % 60) > 0 ? v.zero(Math.floor(times % 60)) : '00';
						} else {
							this.overtime = true;
							this.$emit('on-overtime');
						}
						this.timeout = setTimeout(v.dev, 1000);
					}
				}
			};
			v.dev();
		}
	}
};
</script>

<style lang="less" scoped>
@import '../../../common/styles/variables.less';
.msg {
	font-size: 28upx;
	& > .min {
		font-size: @minSize;
	}
	.clude_img {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		&.err {
			flex-direction: column;
			flex-flow: column;
			& > .err {
				font-size: @minSize;
			}
		}
		.state {
			display: flex;
			align-items: center;
			image {
				width: 35upx;
				height: 35upx;
				margin-right: 10upx;
				display: block;
				vertical-align: middle;
			}
			text {
				font-size: 28upx;
				&.min {
					font-size: @minSize;
				}
			}
		}
		.times {
			text-align: right;
			.lot {
				font-size: 28upx;
			}
			.real {
				font-size: @minSize;
				text {
					font-weight: 600;
				}
			}
		}
	}
}
</style>
